<template>
  <view class="container">
    <view class="back"></view>
    <!-- 轮播图 -->
<!--    <u-swiper-->
<!--        :indicator="true"-->
<!--        height="750rpx"-->
<!--        :list="list"></u-swiper>-->
    <!-- 自定义轮播，可放视频 -->
    <scroll-view style="height: 100vh;width: 100%"
    scroll-y>

    <swiper
        :indicator-dots="true"
        :autoplay="true"
        :interval="5000"
        :duration="500"
        :circular="true"
        style="height: 750rpx">
      <swiper-item v-for="(item, index) in goods.bodyJson" :key="index">
        <view style="height: 750rpx;width: 100%">
            <image
                :lazy-load="true"
                v-if="item.type === 'fileIdOfImg'"
                :src="$kt.file.visit(item.value)"
                mode="heightFix"
                style="height: 100%;"
            ></image>
            <video
                v-if="item.type === 'fileIdOfVideo'"
                :src="$kt.file.visit(item.value)"
                controls
                style="height: 100%;width: 100%"
            ></video>

        </view>

      </swiper-item>
    </swiper>

    <view style="padding: 30rpx;box-sizing: border-box">
      <view style="position: relative;">
        <view style="font-size: 50rpx;font-weight: bold;color: #FF0000">
          <text
              v-if="goods.price!='.'"
              style="font-size: 30rpx">￥</text>{{ goods.price }}
        </view>
        <text
        style="position: absolute;
        right: 0;
        bottom:0;
        font-size: 26rpx;
        color: #999999;"
        >{{$i18n.zhToGlobal('已售出')}}：{{goods.salesVolumeShowNumber}} | {{$i18n.zhToGlobal('剩余')}}：{{goods.stockNumber}}</text>
      </view>
    </view>
    <view style="padding: 0 20rpx">
      <u-row>
        <u-col :span="9">
          <view style="font-weight: bold">
            {{goods.name}}
          </view>
        </u-col>
        <u-col :span="1.5">
          <view
              :style="{
                opacity: isCollectGoodsLoading ? 0.7 : 1
              }"
              @click="toCollectGoods(goods)"
              class="btn" style="text-align: center">
            <view>
              <image
                  v-if="!isCollect"
                  style="width: 30rpx;height: 30rpx;"
                  :src="$kt.file.byPath('image/coll.svg')"></image>
              <image
                  v-else
                  style="width: 30rpx;height: 30rpx;"
                  :src="$kt.file.byPath('image/collFill.svg')"></image>
            </view>
            <view
                v-if="!isNotLogin"
                style="font-size: 20rpx">{{$i18n.zhToGlobal('收藏')}}</view>

            <view
                v-else
                style="font-size: 20rpx">{{$i18n.zhToGlobal('登录')}}</view>

          </view>
        </u-col>
        <u-col :span="1.5">
          <view class="btn" style="text-align: center">
            <view>
              <image
                  style="width: 30rpx;height: 30rpx;"
                  :src="$kt.file.byPath('image/share.svg')"></image>
            </view>
            <view style="font-size: 20rpx">{{$i18n.zhToGlobal('分享')}}</view>
          </view>
        </u-col>
      </u-row>
<!--      <view class="grid-tips">已售2件|仅剩10件</view>-->
      <view style="height: 30rpx"></view>
    </view>


    <view
        v-if="false"
        style="height: 20rpx;background-color: #f0f0f0"></view>

    <view
        v-if="false"
        style="padding: 20rpx;box-sizing: border-box"
    >
      <view>{{$i18n.zhToGlobal('选择')}}：{{$i18n.zhToGlobal('请选择规格')}}</view>
      <view style="height: 10rpx"></view>
    </view>
    <view style="height: 20rpx;background-color: #f0f0f0"></view>

    <view style="border-radius: 20rpx 20rpx 0 0;">
      <view style="height: 20rpx"></view>
      <u-grid :col="2">
        <u-grid-item
            @click="viewType = 'detail'"
        >
          <view style="text-align: center"
          :style="{
            color: viewType === 'detail' ? '#000000' : '#666666',
            fontWeight: viewType === 'detail' ? 'bold' : 'normal'
          }"
          >{{$i18n.zhToGlobal('图文')}}</view>
        </u-grid-item>
        <u-grid-item
            @click="viewType = 'params'"
        >
          <view  style="text-align: center"
          :style="{
            color: viewType === 'params' ? '#000000' : '#666666',
            fontWeight: viewType === 'params' ? 'bold' : 'normal'
          }"
          >{{$i18n.zhToGlobal('参数')}}</view>
        </u-grid-item>
      </u-grid>
      <view style="height: 20rpx"></view>
    </view>

    <view
        v-if="viewType === 'detail'"
        style="width: 100%">
     <view v-for="(item, index) in goods.detailJson" :key="index">
       <view
       v-if="item.type === 'fileIdOfImg'"
       >
         <image
             style="width: 100%;margin-bottom: -5px"
             :lazy-load="true"
             mode="widthFix"
             :src="$kt.file.visit(item.value)"></image>
       </view>
       <view
        v-if="item.type === 'text'">
          <view style="padding: 20rpx;box-sizing: border-box">
            <view style="font-size: 30rpx;font-weight: bold">{{item.value}}</view>
          </view>
       </view>
     </view>
    </view>

    <view
        v-if="viewType === 'params'"
        style="width: 100%;padding: 20px;box-sizing: border-box">
      <view >
        <view class="table">

          <view
              v-for="(item, index) in goods.params" :key="index"
              class="tr">

            <view class="td"
                  v-if="shop.getParamI18nByGoodsParamId(item.paramId).name"
            style="border-right: 1rpx solid #F0F0F0"
            >{{ $kt.util.firstLetterUpper(shop.getParamI18nByGoodsParamId(item.paramId).name) }}</view>
<!--            <view class="td">{{item.value}}</view>-->
            <view class="td">{{getByTextId(item.textId)}}</view>
          </view>
        </view>

      </view>
    </view>

    <view style="height: 180rpx"></view>

    <view class="footer">
      <view style="height: 20rpx"></view>
      <view>
      </view>
      <view style="position: relative">
        <view
            @click="enterServiceChatDialog"
            class="footer-box-small">
          <view>
            <image
                style="width: 50rpx;height: 50rpx;margin-top: 10rpx"
                :src="$kt.file.byPath('image/customer.svg')"></image>
          </view>

        </view>

        <view
            class="footer-box-big">
          <view
          style="
          left: 0;
          width: 50%;
          background-color: #666666;
          height: 90rpx;
          line-height: 90rpx;
          color: #FFFFFF;
          font-size: 28rpx;
          border-radius: 60rpx 0 0 60rpx;
"
          class="btn"
          @click="$refs.goodsPopupOfCart.open(goods)"
          :style="{
                fontSize: (
                    $i18n.getLanguageCode() === 'bg_BG'
                    || $i18n.getLanguageCode() === 'el_GR'
                ) ? '25rpx' : '28rpx'
              }"
          >
<!--            加入购物车-->
            {{$i18n.zhToGlobal('加入购物车')}}
          </view>
          <view
              @click="$refs.goodsPopup.open(goods)"
              style="
              position: absolute;
              top:0;
              right: 0;
          width: 50%;
          height: 90rpx;
          line-height: 90rpx;
          color: #FFFFFF;
          background-color: #FF0000;
          font-size: 28rpx;
          border-radius: 0 60rpx 60rpx 0;
"
              class="btn"
              :style="{
                fontSize: (
                    $i18n.getLanguageCode() === 'fr_BE'
                ) ? '26rpx' : '28rpx'
              }"
          >
            {{$i18n.zhToGlobal('立即购买')}}
          </view>
        </view>
        <view style="height: 30rpx"></view>

      </view>

    </view>
    </scroll-view>


    <goods-popup ref="goodsPopup">
      <template>
        <view style="padding: 10rpx;box-sizing: border-box">
          <kt-button>{{$i18n.zhToGlobal('立即购买')}}</kt-button>
          <view style="height: 30rpx"></view>
        </view>
      </template>
    </goods-popup>

    <goods-popup ref="goodsPopupOfCart">
      <template v-slot:default="item">
        <view style="padding: 10rpx;box-sizing: border-box">
          <kt-button
              ref="addGoodsCartBtn"
              @click="addGoodsCartSelf(item)">{{$i18n.zhToGlobal('加入购物车')}}</kt-button>
          <view style="height: 30rpx"></view>
        </view>
      </template>
    </goods-popup>


  </view>
</template>

<script>
import shop from "@/js/shop";
export default {
  data() {
    return {
      shop,
      goods: {
        name: '.',
        price: ".",
        salesVolumeShowNumber: 2,
        stockNumber: 2,
        bodyJson:[],
        detailJson:[],
      },
      isCollectGoodsLoading: true,
      isNotLogin: false,
      isCollect: false,
      /**
       * 图文：detail
       * 参数：params
       */
      viewType: 'detail',
      textMap:{}
    }
  },
  onLoad(option){
    console.log(option.goodsId, 'option.goodsId');
    this.getByGoodsId(option.goodsId);

    this.getViewListByGoodsId(option.goodsId);
    this.$kt.event.on("login:success", () => {
      console.log('login:success',"商品详情");
      this.isNotLogin = false;
      this.requestIsCollectGoodsSelf();
    });

  },
  mounted() {
    // 修改标题
    uni.setNavigationBarTitle({
      title: this.$i18n.zhToGlobal('商品详情')
    });

  },
  methods:{
// /business-shop-web/shopGoods/enterServiceChatDialog
    enterServiceChatDialog(){
      uni.showLoading({
        title: this.$i18n.zhToGlobal('进入对话中')
      });
      this.$kt.request.send({
        uri: '/business-shop-web/shopGoods/enterServiceChatDialog',
        data: {
          id: this.goods.id
        },
        stateSuccess: (res) => {
          console.log(res.data, 'res.data');
          uni.navigateTo({
            url: '/pages/chat/chat?dialogId=' + res.data.id
          });
          uni.hideLoading();
        },
        stateFail: (err) => {
          uni.hideLoading();

          uni.showToast({
            title: err.errMsg,
            icon: 'none'
          });
          console.log(err, 'err');
        }
      });
    },
    /**
     * 获取客服的用户ID
     * @param
     */
    getServiceIdByGoodsTypeId(goodTypeId){
      let goodsType = shop.getI18nByGoodsTypeId(goodTypeId);
      if(goodsType.userAccountIdOfService){
        return goodsType.userAccountIdOfService;
      }
      console.debug(goodsType, 'goo111dsType1');

      if(!goodsType.parentId){
        return ""
      }

      let goodsTypeParent = shop.getI18nByGoodsTypeId(goodsType.parentId);
      console.debug(JSON.stringify(goodsTypeParent), 'goodsTypeParent');

      if(goodsTypeParent.userAccountIdOfService){
        return goodsTypeParent.userAccountIdOfService;
      }
      return "";
    },

    addGoodsCartSelf(item){
      this.$refs.addGoodsCartBtn.loading();
      console.log(JSON.stringify(item.param),"----");

      this.$kt.request.send({
        uri: '/business-shop-web/shopGoodsCart/addGoodsCartSelf',
        data: {
          goodsId: item.param.goodsId,
          goodsNumber: item.param.number,
          goodsAttrGroupId: item.param.attrGroupId,
        },
        stateSuccess: (res) => {
          this.$kt.event.emit("goodsCart:change");

          this.$refs.addGoodsCartBtn.success(res.msg);

          console.log(res,"===")
          setTimeout(()=>{

            this.$refs.goodsPopupOfCart.close();
            // this.$refs.addGoodsCartBtn.toNone();
          },500);
        },
        stateError: (res) => {
          this.$refs.addGoodsCartBtn.error(res.errMsg);
        },

      });
    },
    getByGoodsId(goodsId){
      // 根据商品id获取商品详情
    //   /business-shop-web/shopGoodsI18n/getById
      this.$kt.request.send({
        uri: '/business-shop-web/shopGoodsI18n/getById',
        data: {
          id:goodsId
        },
        stateSuccess: (res) => {
          this.goods = res.data;
          this.getServiceIdByGoodsTypeId(this.goods.typeId+"");
          this.goods.bodyJson = JSON.parse(this.goods.bodyJsonStr);
          this.goods.detailJson = JSON.parse(this.goods.detailJsonStr);
          this.requestIsCollectGoodsSelf();
          shop.handleList([this.goods]).then((res)=>{
            this.goods = res[0];
          });
        }
      });
    },
    getViewListByGoodsId(goodsId){
      this.$kt.request.send({
        uri: '/business-shop-web/shopGoodsTextI8n/getViewListByGoodsId',
        data: {
          goodsId
        },
        stateSuccess: (res) => {
          console.log(res.data,"-=-=")
          this.textMap = {};
          for (let i = 0; i < res.data.length; i++) {
            this.textMap[res.data[i].id] = res.data[i].text;
          }
          this.$forceUpdate();
        }
      });
    },
    getByTextId(textId,text){
      try{
        return this.textMap[textId]||text;
      }catch (e) {
        return text;
      }
    },
    requestIsCollectGoodsSelf(){
      this.isCollectGoodsLoading = true;
      this.$kt.request.send({
        uri: "/business-shop-web/goodsCollect/isCollectGoodsSelf",
        data: {
          goodsId: this.goods.id
        },
        stateSuccess: (res) => {
          console.log(res.data, 'res.data');
          this.isCollect = res.data;
          this.isCollectGoodsLoading = false;
          this.$forceUpdate();
        },
        stateFail: (err) => {
          this.isNotLogin = true;
          this.isCollectGoodsLoading = false;
          this.$forceUpdate();

        }
      });
    },
    toCollectGoods(goods){
      if(this.isCollectGoodsLoading){
        return;
      }
      console.log(this.isNotLogin, 'this.isNotLogin');
      if(this.isNotLogin){
        uni.navigateTo({
          url: '/pages/login/login'
        });
        return;
      }
      if(!this.isCollect){
        this.isCollect = true;
        this.$kt.request.send({
          uri: "/business-shop-web/goodsCollect/collectGoodsSelf",
          data: {
            goodsId: goods.id
          },
          stateSuccess: (res) => {
            this.requestIsCollectGoodsSelf();
            this.$kt.event.emit("goodsCollect:change");
          },
          stateFail: (err) => {
            if(err.code === "notFound") {
              this.isNotLogin = true;
            }
          }
        });
        return;
      }
      this.isCollect = false;
      this.$kt.request.send({
        uri: "/business-shop-web/goodsCollect/cancelCollectGoodsSelf",
        data: {
          goodsId: goods.id
        },
        stateSuccess: (res) => {
          this.requestIsCollectGoodsSelf();
          this.$kt.event.emit("goodsCollect:change");
        },
        stateFail: (err) => {
          if(err.code === "notFound") {
            this.isNotLogin = true;
          }
        }
      });

    }

  },


}
</script>

<style lang="scss" scoped>
.back{
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #FFFFFF;
  top:0;
  left:0;
  z-index: -1;
}

.grid-icon {
  width: 100rpx;
  height: 100rpx;
}

.grid-text {
  text-align: center;
  font-size: 28rpx;
}

.box{
  padding: 20rpx;
  background-color: #FFFFFF;
  margin-top: 20rpx;
  box-sizing: border-box;

  .title{
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .to-more{
    float: right;
    font-size: 24rpx;
    color: #999999;
    font-weight: lighter;
  }

  .grid-icon{
    width: 100rpx;
    height: 100rpx;
  }

  .more-text{
    vertical-align: top;
  }

  .more-icon{
    width: 24rpx;
    height: 24rpx;
    vertical-align: top;
    margin-top: 5rpx;
  }

}

.good-card{
  position: relative;
  background-color: #FFFFFF;
  margin-top: 20rpx;
  border: 1rpx solid #F0F0F0;
  border-radius: 20rpx;
  width: 300rpx;
  .good-image{
    width: 100%;
    border-radius: 20rpx 20rpx 0 0;
    height: 300rpx;
  }
  .good-card-text{
    font-size: 30rpx;
  }
  .good-card-text-box{
    padding: 10rpx;
    box-sizing: border-box;

    .good-card-text{
      // 超出省略号
      overflow: hidden;
      text-overflow: ellipsis;
      // 最多两行
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
.price{
  font-size: 32rpx;
  color: #FF0000;
  display: inline-block;
}
.grid-tips{
  font-size: 24rpx;
  color: #999999;
  margin-top: 20rpx;
  text-align: left;
}

.footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 0 20rpx 0 20rpx;
  box-sizing: border-box;
  background-color: #FFFFFF;
  border-top: 1rpx solid #F0F0F0;

  .footer-box-small{
    display: inline-block;
    width: 100rpx;
    text-align: center;
    padding-top: 10rpx;
    font-size: 24rpx;
    color: #999999;
  }

  .footer-box-big{
    position: absolute;
    display: inline-block;
    width: calc(100% - 100rpx);
    text-align: center;
    font-size: 36rpx;
    color: #999999;
    border-radius: 50rpx;
    box-sizing: border-box;
  }
}
.btn:active{
  opacity: .7;
}

.table{
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20rpx;
  border: 1rpx solid #F0F0F0;
  border-radius: 10rpx;
  .tr{
    display: table-row;
    .td{
      display: table-cell;
      padding: 20rpx;
      box-sizing: border-box;
      border-bottom: 1rpx solid #F0F0F0;
    }
  }
}
</style>